<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-table border stripe style="margin:10px 0;" :data="skuList.records">
            <el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
            <el-table-column label="名称" prop="skuName"></el-table-column>
            <el-table-column label="描述" prop="skuDesc"></el-table-column>
            <el-table-column label="默认图片">
                <template #="{row,$index}">
                    <img :src="row.skuDefaultImg" alt="" style="width: 100px;height:100px;">
                </template>
            </el-table-column>
            <el-table-column label="重量（千克）" prop="weight"></el-table-column>
            <el-table-column label="价格（元）" prop="price"></el-table-column>
            <el-table-column label="操作" width="250">
                <template #="{row,$index}">
                    <el-button :type="row.isSale == 0 ? 'success' : 'info'" :icon="row.isSale == 0 ? Top : Bottom"
                        size="small" @click="changeSale(row)"></el-button>
                    <el-button type="primary" size="small" :icon="Edit"
                        @click="ElMessage({ type: 'warning', message: '开发中...' })"></el-button>
                    <el-button type="info" size="small" :icon="InfoFilled" @click="showSkuInfo(row)"></el-button>
                    <el-button type="danger" size="small" :icon="Delete" @click="removeSku(row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeHandler" @current-change="getSkuList" v-model:current-page="currentPage"
            :page-sizes="[5, 10, 20, 30]" v-model:page-size="pageSize"
            layout=" prev, pager, next, jumper,->,sizes,total" :total="skuList.total" background :pager-count="7">
        </el-pagination>


        <!-- 抽屉显示SKU详情 -->
        <el-drawer v-model="drawer">
            <el-row :gutter="10">
                <el-col :span="6" style="text-align: right">名称：</el-col>
                <el-col :span="18">{{skuInfo.skuName}}</el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="6" style="text-align: right">描述：</el-col>
                <el-col :span="18">{{skuInfo.skuDesc}}</el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="6" style="text-align: right">价格：</el-col>
                <el-col :span="18">{{skuInfo.price}}</el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="6" style="text-align: right">平台属性：</el-col>
                <el-col :span="18">
                    <el-tag type="success" v-for="item in skuInfo.skuAttrValueList" :key="item.id"
                        style="margin-left: 3px">{{ item.valueName }}</el-tag>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="6" style="text-align: right">销售属性：</el-col>
                <el-col :span="18">
                    <el-tag type="success" v-for="item in skuInfo.skuSaleAttrValueList" :key="item.id"
                        style="margin-left: 3px">{{item.saleAttrValueName}}</el-tag>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="12">商品图片：</el-col>
            </el-row>
            <!-- 轮播图 -->
            <el-carousel indicator-position="outside">
                <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
                    <img :src="item.imgUrl" alt="" style="width: 400px;height:300px;">
                </el-carousel-item>
            </el-carousel>
        </el-drawer>
    </el-card>

</template>

<script setup lang="ts">
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
    Plus,
    UploadFilled,
    Top,
    Bottom,
    InfoFilled,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ref, onMounted, reactive } from 'vue'
import { reqSkuList, reqSkuInfo, reqDeleteSku } from '@/api/product/sku/sku'
// 存储当前页码
let currentPage = ref<number>(1)
// 存储一页显示几条数据
let pageSize = ref<number>(5)
// 存储sku列表
let skuList = reactive({})
// 显示抽屉
let drawer = ref(false)
// sku详情
let skuInfo = ref({})
// 组件挂载
onMounted(() => {
    getSkuList()
})

//发请求获取SKU列表
const getSkuList = async (page: number = 1) => {
    //整理参数
    currentPage.value = page
    let result = await reqSkuList(currentPage.value, pageSize.value)
    // console.log(result);

    // 存储服务器返回的数据
    Object.assign(skuList, result)
}
// 改变一页显示几条数据
const sizeHandler = (limit: number) => {
    pageSize.value = limit
    getSkuList()
}
// 点击按钮 上架与下架
const changeSale = (row) => {
    // 切换上架与下架的状态
    row.isSale == 0 ? (row.isSale = 1) : (row.isSale = 0)
}
// 点击按钮获取sku详情
const showSkuInfo = async (row) => {
    drawer.value = true
    let result = await reqSkuInfo(row.id)
    console.log(result);
    skuInfo.value = result
}
// 点击删除按钮
const removeSku = async(row) =>{
    try {
        await reqDeleteSku(row.id)
        ElMessage({
            type:'success',
            message:'删除成功'
        })
        getSkuList()
    } catch (error) {
        ElMessage({
            type:'error',
            message:'删除失败'
        })
    }
}
</script>

<style scoped>
 >>> .el-carousel__button {
    width: 10px;
    height: 10px;
    background: yellowgreen;
    border-radius: 50%;
}
</style>